<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script>
	let = data = new FormData();
	window.onload = function() {
		let oUser = document.querySelector('#user');
		let oPwd = document.querySelector('#pwd');
		let oBtn = document.querySelector('#btn1');
		let oFile = document.querySelector('#file');

		oBtn.onclick = function() {
			// formdata的使用
			let data = new FormData();
			data.set('user', oUser.value);
			data.set('pwd', oPwd.value);
			// 这里不能用 oFile.value ，value 只能得到文件的本地保密路径
			// oFile.files 是一个数组，每个元素是上传的文件对象，包含所有上传文件的大小、文件名、类型、修改时间
			Array.from(oFile.files).forEach(file => {
				data.append('file', file);
			})
			

			let xhr = new XMLHttpRequest();
			xhr.open('POST', 'http://localhost:8080/api', true);
			xhr.send(data);
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4) {
					if (xhr.status >= 200 && xhr.status < 300 || status == 304) {
						alert('成功')
					} else {
						alert('失败')
					}
				}
			}
		}
	}


	</script>
</head>
<body>
	用户：<input type="text" id="user"><br>
	密码：<input type="password" id="pwd"><br>
	<!-- multiple 用于上传多个文件 -->
	上传：<input type="file" id="file" multiple>
	<input type="button" value="提交" id="btn1" >
</body>
</html>